import { Calc } from '@/api'
import { Button, Form, Input } from 'react-vant'
import { Helmet, useMutation } from 'umi'

export default function PageForm5() {
  const [form] = Form.useForm()

  // #计算
  const { mutate: calc, isLoading: isCalcLoading } = useMutation({
    mutationFn: Calc,
    onSuccess: (res) => {
      const { tsbbdj, wmbbdj } = res
      form.setFieldValue('tsbbdj', tsbbdj)
      form.setFieldValue('wmbbdj', wmbbdj)
    },
  })

  const handleSubmit = (values: any) => {
    calc({
      type: 5,
      data: {
        ...values,
      },
    })
  }

  return (
    <>
      <Helmet>
        <title>菜品定价</title>
      </Helmet>

      <section className="relative p-4 min-h-screen">
        <Form
          initialValues={{
            yye: undefined,
          }}
          form={form}
          onFinish={handleSubmit}
          footer={(
            <footer className="mt-6">
              <Button round nativeType="submit" loading={isCalcLoading} type="primary" block>
                开始计算
              </Button>
            </footer>
          )}
        >

          <div className="overflow-hidden bg-white rounded-lg">
            <Form.Item
              labelWidth={120}
              label="菜品直接成本"
              name="cpzjcb"
              rules={[
                {
                  type: 'number',
                  message: '请输入数字',
                  transform: value => Number(value),
                },
              ]}
            >
              <Input clearable placeholder="请输入菜品直接成本" suffix="元" />
            </Form.Item>

            <Form.Item
              labelWidth={120}
              label="期望菜品占比"
              name="qwcpzb"
              rules={[
                {
                  type: 'number',
                  transform: value => Number(value),
                  min: 0.1,
                  max: 99.9,
                  message: '必须在0.1%到99.9%之间',
                },
              ]}
            >
              <Input clearable placeholder="请输入期望菜品占比" suffix="%" />
            </Form.Item>

            <Form.Item
              labelWidth={120}
              label="外卖费率"
              name="wmfl"
              rules={[
                {
                  type: 'number',
                  transform: value => Number(value),
                  min: 0.1,
                  max: 99.9,
                  message: '必须在0.1%到99.9%之间',
                },
              ]}
            >
              <Input clearable placeholder="请输入外卖费率%" suffix="%" />
            </Form.Item>

            <Form.Item
              labelWidth={120}
              label="外卖红包"
              name="wmhb"
              rules={[
                {
                  type: 'number',
                  message: '请输入数字',
                  transform: value => Number(value),
                },
              ]}
            >
              <Input clearable placeholder="请输入外卖红包" suffix="元" />
            </Form.Item>

            <Form.Item
              labelWidth={120}
              label="配送减免"
              name="psjm"
              rules={[
                {
                  type: 'number',
                  message: '请输入数字',
                  transform: value => Number(value),
                },
              ]}
            >
              <Input clearable placeholder="请输入配送减免" suffix="元" />
            </Form.Item>
          </div>

          <div className="overflow-hidden mt-4 rounded-lg">
            <Form.Item
              labelWidth={120}
              label="堂食保本定价"
              name="tsbbdj"
            >
              <Input placeholder="待计算" readOnly suffix="元" className="font-bold" />
            </Form.Item>
            <Form.Item
              labelWidth={120}
              label="外卖保本定价"
              name="wmbbdj"
            >
              <Input placeholder="待计算" readOnly suffix="元" className="font-bold" />
            </Form.Item>
          </div>

        </Form>
      </section>
    </>
  )
}
